<template>
  <div class="DiyRubiks">
    <div class="RubiksConfig">
      <el-form ref="form" label-width="80px" size="small">
        <el-form-item label="魔方层数">
          <template>
            <el-input-number @change="changeNum" v-model="rowNum" :min="1" :max="100"></el-input-number>
          </template>
        </el-form-item>
        <!-- <el-form-item label="单层高度">
          <template>
            <el-input v-model="storeyHeight" placeholder="请输入内容"></el-input>
          </template>
        </el-form-item> -->
        <el-form-item label="魔方列数">
          <template>
            <el-input-number @change="changeNum" v-model="lineNum" :min="1" :max="10"></el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="添加热区">
          <template><el-button type="primary" @click="addHotMode">添加热区</el-button></template>
        </el-form-item>
        <el-form-item label="热区位置">
          <template>
            距离顶部距离：<el-input v-model="selectHotTop" placeholder="请输入内容"></el-input><br>
            距离左边距离：<el-input v-model="selectHotLeft" placeholder="请输入内容"></el-input><br>
            热区链接：<el-input v-model="selectHotLink" placeholder="请输入内容"></el-input><br>
          </template>
        </el-form-item>
      </el-form>
    </div>
    <div class="decorate-cube-box">
      <div class="decorate-cube" ref="decorate_cube">
        <ul class="cube-row" v-for="n in lineNum" :key="n">
          <li
            v-for="i in rowNum"
            :class="['cube-item',{'item-selecting': isSelecting(i,n),'item-selected':isSelected(i,n) }]"
            :style="{'width':'100%','height':cubeItemHeight+'px'}"
            :data-x="i"
            :data-y="n"
            :key="'y'+i"
            @click="cubeItemClick($event)"
          >
          </li>
        </ul>

        <template v-if="cudeSelected.length > 0">
          <div
            class="cube-selected"
            v-for="(item, index) in cudeSelected"
            :key="'select'+index"
            :style="{'backgroundImage':item.backImg,'width':getCubeSelectedWidth(item)+'%','height':getCubeSelectedHeight(item)+'px','top':getCubeSelectedTop(item)+'px','left':getCubeSelectedLeft(item)+'px'}"
            @click="setCont(index)"
          >
            <div class="cube-selected-text">
              {{index + 1}}
            </div>
          </div>
        </template>
      </div>
    </div>
    <UploadImages @closeModel="closeModel" :dialogVisible="showImg" @changeImg="changeImg"></UploadImages>
  </div>
</template>

<script>
import { initialdata } from "../initdata/initialdata"
import UploadImages from "@/components/UploadImages/UploadImages";
import { mapGetters } from "vuex";
export default {
  name: "DiyRubiks",
  components: {
    UploadImages
  },
  data() {
    return {
      initialdata,
      nowIdx: "",
      showImg: false,
      density: 4, // 密度
      cubeWidth: 260, // 魔方宽度
      cubeHeight: 260, // 魔方高度
      topDistance: 0,
      leftDistance: 0
      // cudeSelecting: {
      //   start: null,
      //   end: null,
      //   data: []
      // },
      // cudeSelected: [] // 已经生成的单元
    };
  },
  computed: {
    ...mapGetters(["rubils"]),
    // 密度值
    densityNum: function() {
      return parseInt(this.density);
    },
    // 单元魔方高度
    cubeItemHeight: function() {
      return this.cubeHeight / this.density;
    },
    // 单元魔方宽度
    cubeItemWidth: function() {
      return this.cubeWidth / this.density;
    },
    rowNum: {
      get() {
        return this.rubils.rowNum
      },
      set(val) {
        this.rubils.rowNum = val;
        this.rubils.selectedCube = this.cudeSelected;
      }
    },
    lineNum: {
      get() {
        return this.rubils.lineNum
      },
      set(val) {
        this.rubils.lineNum = val;
        this.rubils.selectedCube = this.cudeSelected;
      }
    },
    cudeSelected: {
      get() {
        return this.rubils.selectedCube;
      },
      set(val) {
        this.rubils.selectedCube = val;
      }
    },
    selectHotTop: {
      get() {
        return this.rubils.selectHotTop;
      },
      set(val) {
        this.rubils.selectHotTop = val;
        this.rubils.hotData[this.rubils.selectHotIdx].top = val;
      }
    },
    selectHotLeft: {
      get() {
        return this.rubils.selectHotLeft;
      },
      set(val) {
        this.rubils.selectHotLeft = val;
        this.rubils.hotData[this.rubils.selectHotIdx].left = val;
      }
    },
    selectHotLink: {
      get() {
        return this.rubils.selectHotLink;
      },
      set(val) {
        this.rubils.selectHotLink = val;
        this.rubils.hotData[this.rubils.selectHotIdx].link = val;
      }
    },
    cudeSelecting: {
      get() {
        return this.rubils.cudeSelecting;
      },
      set(val) {
        this.rubils.cudeSelecting = val;
      }
    },
    hotData: {
      get() {
        return this.rubils.hotData;
      },
      set(val) {
        this.rubils.hotData = val;
      }
    }
  },
  watch: {
    topDistance(val) {
      this.selectHotTop = val;
    },
    leftDistance(val) {
      this.selectHotLeft = val;
    },
    rubils: {
      handler(val) {
        this.setVuexData();
      },
      deep: true
    }
  },
  methods: {
    addHotMode() {
      console.log(this.hotData)
      var hotDates = this.hotData;
      console.log(this.initData)
      hotDates.push({
        top: 0,
        left: 0,
        link: ""
      })
      this.hotData = hotDates;
    },
    changeNum() {
      this.clear();
    },
    closeModel() {
      this.showImg = false;
    },
    changeImg(val) {
      console.log(val);
      this.rubils.selectedCube[this.nowIdx].backImg = "url(" + val + ")";
    },
    setCont(index) {
      this.nowIdx = index
      this.showImg = true;
    },
    setVuexData() {
      setTimeout(() => {
        this.$store.commit("Rubiks/Set_rubils", this.rubils);
        this.update();
      }, 100)
    },
    update() {
      // 更新vuex里面的PageJSON
      this.$store.dispatch("apply/PageJSONUpData");
      // 更新父组件中的PageJSON
      setTimeout(() => {
        this.$emit("updataNowPageJSON");
      }, 100)
    },
    clear() {
      this.cudeSelected = [];
      this.cudeSelecting.start = null;
      this.cudeSelecting.end = null;
      this.cudeSelecting.data = [];
    },
    // 魔方点击事件
    cubeItemClick: function(event) {
      var el = event.currentTarget;
      console.log(event, event.currentTarget)
      var x = el.getAttribute("data-x");
      var y = el.getAttribute("data-y");
      var domclass = el.getAttribute("class");
      console.log("[" + x + "," + y + "," + domclass + "]执行了点击");

      var cudeSelectingStart = this.cudeSelecting.start;
      var coord = { x: x, y: y };

      if (domclass.indexOf("item-selected") !== -1) {
        alert("已经被占用");
        return;
      }

      if (cudeSelectingStart == null) {
        this.cudeSelecting.start = coord;
        this.cudeSelecting.data.push(coord);
      } else {
        var cudeSelectdata = this.cudeSelected;
        this.cudeSelecting.end = coord;
        this.cudeSelecting.data.push(coord);

        // 获取开始和结束之间所有魔方单元
        var start = cudeSelectingStart;
        var end = coord;

        var x_start = Math.min(start.x, end.x);
        var x_end = Math.max(start.x, end.x);

        var y_start = Math.min(start.y, end.y);
        var y_end = Math.max(start.y, end.y);

        var real_start = {
          x: Math.min(start.x, end.x),
          y: Math.min(start.y, end.y)
        };
        var real_end = {
          x: Math.max(start.x, end.x),
          y: Math.max(start.y, end.y)
        };

        // 清空正在选择的
        // vm.cudeSelecting.data.splice(0);

        for (let i = x_start; i <= x_end; i++) {
          for (let j = y_start; j <= y_end; j++) {
            this.cudeSelecting.data.push({ x: i, y: j });
          }
        }

        var cudeSelectingData = this.cudeSelecting.data;
        var cudeSelectedArr = [];

        for (let i = 0; i < cudeSelectingData.length; i++) {
          cudeSelectedArr.push(cudeSelectingData[i]);
        }

        console.log(cudeSelectedArr);
        console.log(real_start);
        console.log(real_end);

        // 加入选中的
        var cudeSelected = {
          start: real_start,
          end: real_end,
          data: cudeSelectedArr,
          backImg: ""
        };
        cudeSelectdata.push(cudeSelected);
        this.cudeSelected = cudeSelectdata;
        // 清除正在选择的
        this.cudeSelecting.start = null;
        this.cudeSelecting.end = null;
        // vm.cudeSelecting.data.splice(0);
        this.setVuexData();
      }
    },
    // 判断是否正在选择
    isSelecting: function(x, y) {
      var cudeSelectingData = this.cudeSelecting.data;
      for (var i = 0, len = cudeSelectingData.length; i < len; i++) {
        var coord = cudeSelectingData[i];
        if (
          parseInt(coord.x) === parseInt(x) &&
          parseInt(coord.y) === parseInt(y)
        ) {
          return true;
        }
      }
      return false;
    },
    // 判断是否已经选择
    isSelected: function(x, y) {
      var list = this.cudeSelected;
      for (var i = 0; i < list.length; i++) {
        var data = list[i].data;
        for (var j = 0; j < data.length; j++) {
          var coord = data[j];
          if (
            parseInt(coord.x) === parseInt(x) &&
            parseInt(coord.y) === parseInt(y)
          ) {
            return true;
          }
        }
      }
      return false;
    },
    // 计算选中层的宽度
    getCubeSelectedWidth: function(item) {
      return (
        (parseInt(item.end.y) - parseInt(item.start.y) + 1) * (100 / this.lineNum)
      );
    },
    // 计算选中层的高度
    getCubeSelectedHeight: function(item) {
      return (
        (parseInt(item.end.x) - parseInt(item.start.x) + 1) *
        this.cubeItemHeight
      );
    },
    // 计算选中层的右边距离
    getCubeSelectedTop: function(item) {
      return (item.start.x - 1) * this.cubeItemHeight;
    },
    // 计算选中层的左边距离
    getCubeSelectedLeft: function(item) {
      return (item.start.y - 1) * (260 / this.lineNum);
    }
  }
};
</script>

<style lang="scss" scoped>
.decorate-cube-box {
  width: 320px;
  max-height: 500px;
  overflow: auto;
  border-bottom: 1px solid #dad5d5;
}
.el-input-number {
  text-align: left!important;
}
.decorate-cube {
  width: 260px;
  // margin: 0 auto;
  position: relative;
  display: flex;
  margin-bottom: 20px;

}
.decorate-cube .cube-row:last-of-type .cube-item {
  border-right: 1px solid #e5e5e5;
}
.decorate-cube .cube-selected {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ebedf0;
  text-align: center;
  color: #7d7e80;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1;
  background-size: 100% 100%;
}
.decorate-cube .cube-selected.cube-selected-click {
  background: #e0edff;
  border: 1px solid #155bd4;
  color: #155bd4;
  z-index: 2;
  cursor: auto;
}
.decorate-cube .cube-selected-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 100%;
  height: 100%;
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translateX(-50%) translateY(-50%);
}
.decorate-cube .cube-row {
  // float: left;
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}
.decorate-cube .cube-item:first-child {
  border-top: 1px solid #e5e5e5;
}
.decorate-cube .cube-item {
  background: #f8f8f8;
  border-left: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}
.decorate-cube .cube-item.item-selecting {
  background: #e0edff;
}
.decorate-cube .cube-item.item-selecting .van-icon {
  display: none;
}
.decorate-cube .cube-item.item-selected {
  background: #e0edff;
  visibility: hidden;
}
.decorate-cube .cube-item.item-selected .van-icon {
  display: none;
}
</style>
